@mixin bg-img($u){
    background-image: url('#{$u}@2x.png');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        background-image: url('#{$u}@3x.png');
    }
}

@mixin clamp($n) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $n;
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin border_one($direction, $color, $style: solid, $ratio: 0.5) {
    position: absolute;
    content: "";
    z-index: 1;
    display: block;
    border-#{$direction}: 1px $style $color;
    -webkit-transform-origin: $direction;
    -moz-transform-origin: $direction;
    transform-origin: $direction;

    @if $direction == left {         // 左边框
        top: 0;
        left: 0;
        bottom: 0;
        -webkit-transform: scaleX($ratio);
        -moz-transform: scaleX($ratio);
        transform: scaleX($ratio);
    }

    @else if $direction == top {     // 上边框
        top: 0;
        left: 0;
        right: 0;
        -webkit-transform: scaleY($ratio);
        -moz-transform: scaleY($ratio);
        transform: scaleY($ratio);
    }

    @else if $direction == right {    // 右边框
        top: 0;
        right: 0;
        bottom: 0;
        -webkit-transform: scaleX($ratio);
        -moz-transform: scaleX($ratio);
        transform: scaleX($ratio);
    }

    @else if $direction == bottom {    // 下边框
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transform: scaleY($ratio);
        -moz-transform: scaleY($ratio);
        transform: scaleY($ratio);
    }
}

@mixin border_all($color, $radius: 0) {        // 全边框
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 200%;
    height: 200%;
    border: 1px solid $color;
    border-radius: $radius;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    transform: scale(.5);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}